<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/icon.css">
    <script src="../js/jquery-easyui-1.6.10/jquery.min.js"></script>
    <script src="../js/jquery-easyui-1.6.10/jquery.easyui.min.js"></script>
    <script src="../js/jquery.serializejson.min.js"></script>
</head>

<body>
    <table id="dg"></table>
    <div id="dlg" class="easyui-dialog" title="数据操作" data-options="iconCls:'icon-save',closed: true" style="width:400px;height:400px;padding:10px">
        <form id="ff" class="easyui-form" data-options="novalidate:true">
            <table cellpadding="5">
                <tr>
                    <td>ID:</td>
                    <td><input class="easyui-textbox" name="_id" style="width:200px"></td>
                </tr>
                <tr>
                    <td>用户名称:</td>
                    <td><input class="easyui-textbox" name="name" style="width:200px" data-options="lrequired:true"></td>
                </tr>
                <tr>
                    <td>用户密码:</td>
                    <td><input class="easyui-textbox" name="password" style="width:100%" data-options="required:true"></td>
                </tr>
                <tr>
                    <td>用户密码:</td>
                    <td><input class="easyui-textbox" name="password" style="width:100%" data-options="required:true"></td>
                </tr>
                <tr>
                    <td>性别:</td>
                    <td><input class="easyui-validatebox" name="sex" type="radio" value="男" style="width:10px">男
                        <input class="easyui-validatebox" name="sex" type="radio" value="女" style="width:10px">女
                    </td>
                </tr>
                <tr>
                    <td>用户年龄:</td>
                    <td><input class="easyui-textbox" name="age" style="width:100%" data-options="required:true"></td>
                </tr>
                <tr>
                    <td>用户身高:</td>
                    <td><input class="easyui-textbox" name="height" style="width:100%" data-options="required:true"></td>
                </tr>
                <tr>
                    <td>用户体重:</td>
                    <td><input class="easyui-textbox" name="weight" style="width:100%" data-options="required:true"></td>
                </tr>
                <tr>
                    <td>用户爱好:</td>
                    <td><input class="easyui-textbox" name="like" style="width:100%" data-options="required:true"></td>
                </tr>
                <tr>
                    <td>用户成绩:</td>
                    <td><input class="easyui-textbox" name="results" style="width:100%" data-options="lrequired:true"></td>
                </tr>
                <tr>
                    <td>用户国籍:</td>
                    <td><input class="easyui-textbox" name="country" style="width:100%" data-options="lrequired:true"></td>
                </tr>
                <tr>
                    <td>用户城市:</td>
                    <td><input class="easyui-textbox" name="city" style="width:100%" data-options="required:true"></td>
                </tr>
            </table>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
</body>

</html>
<script>
    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function(e) {
                if (
                    $(this)
                    .form('enableValidation')
                    .form('validate')
                ) {
                    var formData = $('#ff').serializeJSON();

                    if ($('#ff').serializeJSON()._id) {
                        $.ajax({
                            url: `http://localhost:3000/users/${formData._id}`,
                            type: 'put',
                            data: formData
                        }).done(function(res) {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        });
                    } else {
                        // 新增的时候不得有_id
                        delete formData._id;
                        console.log(123);
                        $.ajax({
                            url: 'http://localhost:3000/users',
                            type: 'post',
                            data: formData
                        }).done(function(res) {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        });
                    }
                }
                // return false;
            }
        });
    }

    function clearForm() {
        $('#ff').form('clear');
    }

    $('#dg').datagrid({
        url: 'http://localhost:3000/users/list',
        fit: true,
        pagination: true,
        toolbar: [{
                text: '添加数据',
                iconCls: 'icon-add',
                handler: function() {
                    $('#dlg').dialog('open');
                }
            },
            '-', {
                text: '删除数据',
                iconCls: 'icon-cut',
                handler: function() {
                    deleteDatas();
                }
            }
        ],
        columns: [
            [{
                field: 'ck',
                checkbox: true
            }, {
                field: 'name',
                title: '姓名',
                width: '10%',
                align: 'center'
            }, {
                field: 'password',
                title: '密码',
                width: '10%',
                align: 'center'
            }, {
                field: 'sex',
                title: '性别',
                width: '7.5%',
                align: 'center'
            }, {
                field: 'age',
                title: '年龄',
                width: '6%',
                align: 'center'
            }, {
                field: 'height',
                title: '身高',
                width: '9%',
                align: 'center'
            }, {
                field: 'weight',
                title: '体重',
                width: '9%',
                align: 'center'
            }, {
                field: 'like',
                title: '爱好',
                width: '16%',
                align: 'center'
            }, {
                field: 'results',
                title: '成绩',
                width: '6%',
                align: 'center'
            }, {
                field: 'country',
                title: '国籍',
                width: '8.5%',
                align: 'center'
            }, {
                field: 'city',
                title: '城市',
                width: '9%',
                align: 'center'
            }, {
                field: '_id',
                title: '操作',
                width: 90,
                align: 'center',
                formatter: function(value, row, index) {
                    return `<button onclick="editData('${
              row._id
            }')">修改</button> <button onclick="deleteData('${
              row._id
            }')">删除</button>`
                }
            }]
        ],
        onDblClickRow: function(index, row) {
            console.log(index, row);
        }
    });

    function deleteData(id) {
        $.messager.confirm('确认框', '你确认删除该数据?', function(r) {
            if (r) {
                $.ajax({
                    url: `http://localhost:3000/users/${id}`,
                    type: 'delete'
                }).done(function(res) {
                    $('#dg').datagrid('reload');
                });
            }
        });
    }

    function editData(id) {
        $.ajax({
            url: `http://localhost:3000/users/${id}`,
            type: 'get'
        }).done(function(res) {
            $('#ff').form('load', res);
            $('#dlg').dialog('open');
        });
    }

    function deleteDatas() {
        var dgSelections = $('#dg').datagrid('getSelections');
        var ids = [];
        for (var i = 0; i < dgSelections.length; i++) {
            ids.push(dgSelections[i]._id);
        }
        $.ajax({
            url: `http://localhost:3000/users/${ids}`,
            type: 'delete'
        }).done(function(res) {
            $('#dg').datagrid('reload');
        });
    }
</script>